<template>
    <div class="webheart user-center">
        <div class="user-ornament">
            <div class="webheart">
                <div class="crumbs-wrap">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="clearfix">
                                <div class="crumbs fl">
                                    <h2>
                                        <span class="iconfont icon-gerenziliao"></span> 用户空间
                                    </h2>
                                </div>
                                <div class="user-info-box fl" @click="routeTo('user-center')">
                                    <div class="fl user-info-hed">
                                        <img :src="userPture || headPic" />
                                    </div>

                                    <div class="fl user-info-material">
                                        <p>
                                            <span class="user-info-name">{{ username }}</span>
                                        </p>
                                        <p class="two-ellipsis" :title="deptName">{{ deptName }}</p>
                                        <p class="topage">详情 >></p>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="user-audit-box clearfix icon_top2" @click="routeTo('user-message')">
                                <div class="fl user-audit-hed">
                                    <img src="../../../assets/users/top2.png" />
                                </div>
                                <div class="fl user-audit-totl">
                                    <p class="user-audit-num">{{ spaceCount.msgCount }}</p>
                                    <p class="user-audit-title">我的消息</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4" class="border-non">
                            <div class="user-audit-box clearfix icon_top3" @click="routeTo('user-review')">
                                <div class="fl user-audit-hed">
                                    <img src="../../../assets/users/top3.png" />
                                </div>
                                <div class="fl user-audit-totl">
                                    <p class="user-audit-num">{{ spaceCount.reviewCount }}</p>
                                    <p class="user-audit-title">我的待评审</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4" class="border-non">
                            <div class="user-audit-box clearfix icon_top4" @click="routeTo('user-audit')">
                                <div class="fl user-audit-hed">
                                    <img src="../../../assets/users/top4.png" />
                                </div>
                                <div class="fl user-audit-totl">
                                    <p class="user-audit-num">{{ spaceCount.auditCount }}</p>
                                    <p class="user-audit-title">我的待审核</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4" class="border-non">
                            <div class="user-audit-box clearfix icon_top5">
                                <div class="fl user-audit-hed">
                                    <img src="../../../assets/users/top5.png" />
                                </div>
                                <div class="fl user-audit-totl" @click="outStyle()">
                                    <p class="user-audit-num">{{ spaceCount.dataCount }}</p>
                                    <p class="user-audit-title">
                                        我的数据
                                        <i class="el-icon-arrow-down" v-if="mouseoutShow == false"></i>
                                        <i v-if="mouseoutShow == true" class="el-icon-arrow-up"></i>
                                    </p>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <transition name="fade">
            <div class="user-center-main" v-if="mouseoutShow == true">
                <div class="user-info-menustotal clearfix">
                    <template v-for="(v, index) in menustotal">
                        <div class="menustotal-item fl" :key="index" v-if="v.isShow" @click="routeToNew(v)">
                            <p class="menustotal-item-total" :style="{ color: v.color }">{{
                v.num
              }}</p>
                            <p class="menustotal-item-line">
                                <span></span>
                            </p>
                            <p class="menustotal-item-name" :style="{ background: v.color }">{{ v.name }}</p>
                        </div>
                    </template>
                </div>
            </div>
        </transition>
        <div class="user-info-iconWrap clearfix">
            <div class="user-info-learn fl" @click="routeTo('index')">
                <img src="../../../assets/users/l1.png" />
            </div>
            <div class="user-info-icon fl">
                <template v-for="(v, index) in manageIcon">
                    <div class="icon-item fl" :key="index" :style="{ background: v.color }" @click="routeToNew(v)" v-if="v.isShow">
                        <img :src="v.img" alt />
                        <p class="icon-item-name">{{ v.name }}</p>
                    </div>
                </template>
            </div>
            <div class="user-info-icon fl">
                <template v-for="(v, index) in setIngIcon">
                    <div class="icon-item fl" :key="index" :style="{ background: v.color }" @click="routeToNew(v)" v-if="v.isShow">
                        <img :src="v.img" alt />
                        <p class="icon-item-name">{{ v.name }}</p>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
import { mySpaceQuery } from '@/api/http'
import userInfo from '@/mixins/userInfo.js'
import webinfo from '@/mixins/webinfo.js'
import { mapGetters } from 'vuex'
import { menustotal, manageIcon, setIngIcon } from './baseData'
import webMenu from '@/mixins/webMenu.js'
import { forEach } from 'jszip'
export default {
    mixins: [userInfo, webinfo, webMenu],
    components: {},
    data() {
        return {
            spaceCount: {
                msgCount: 0,
                auditCount: 0,
                reviewCount: 0,
                dataCount: 0,
            },
            menustotal,
            manageIcon,
            setIngIcon,
            userInfo: {},
            deptName: '',
            mouseoutShow: false,
        }
    },
    computed: mapGetters(['username', 'headPic', 'userPture', 'deptFullData', 'menuTree']),
    mounted() {
        this.init()
        this.queryList()
        this.permission()
        this.permissionSystem()
    },
    methods: {
        permission() {
            let menuData = this.$store.getters.menuData
            menuData.forEach(e => {
                this.manageIcon.forEach(v => {
                    if (e.id == v.id) {
                        v.name = e.name
                    }
                });
                this.setIngIcon.forEach(v => {
                    if (e.id == v.id) {
                        v.name = e.name
                    }
                });
            });
            //元素库管理
            this.manageIcon[0].isShow = menuData.filter((v) => v.id == 692).length > 0
            this.menustotal[0].isShow = menuData.filter((v) => v.id == 692).length > 0
            let shareData = menuData.filter((v) => v.id == 712)
            if (shareData && shareData.length && shareData[0].hasOwnProperty('childList')) {
                let shareChildList = shareData[0].childList
                //专题库管理
                this.manageIcon[1].isShow = shareChildList.filter((v) => v.id == 713).length > 0
                this.menustotal[1].isShow = shareChildList.filter((v) => v.id == 713).length > 0
                //示范微视频管理
                this.manageIcon[2].isShow = shareChildList.filter((v) => v.id == 714).length > 0
                this.menustotal[2].isShow = shareChildList.filter((v) => v.id == 714).length > 0
            }
            //培训资源管理
            this.manageIcon[3].isShow = menuData.filter((v) => v.id == 60).length > 0
        },
        permissionSystem() {
            let menuData = this.$store.getters.menuData
            this.setIngIcon.forEach((v) => {
                v.isShow = menuData.filter((m) => m.id == v.id).length > 0
            })
        },
        findFullDept(obj) {
            if (obj.hasOwnProperty('childList')) {
                return this.findFullDept(obj.childList[0])
            } else {
                return obj.deptFullnamepath
            }
        },
        init() {
            let deptFullData = this.findFullDept(this.deptFullData)
            if (deptFullData) {
                deptFullData = deptFullData.split('/')
                this.deptName = deptFullData[deptFullData.length - 2]
            } else {
                this.deptName = '暂无部门'
            }
        },
        routeTo(name) {
            this.$router.push({
                name: name,
            })
        },
        routeToNew(v) {
            let arr = [
                'share-library',
                'training-library',
                'learn-center',
                'user-data',
                'user-download',
                'user-collect',
            ]
            if (arr.indexOf(v.path) != -1) {
                this.routeTo(v.pathName)
                return
            }
            let asyncRoute = JSON.parse(this.getSession('asyncRoute'))
            if (asyncRoute.length) {
                let newRoute = asyncRoute[0].children.filter(
                    (item) => item.path.indexOf(v.path) != -1,
                )
                if (newRoute.length) {
                    let newRouteName = newRoute[0].children[0].name
                    this.routeTo(newRouteName)
                }
            }
        },
        // 点击显示
        outStyle() {
            this.mouseoutShow = !this.mouseoutShow
        },
        queryList() {
            mySpaceQuery().then((res) => {
                let { data } = res.data
                if (!data) return

                this.spaceCount.msgCount = data.filter((v) => v.type == 1)[0].num
                this.spaceCount.reviewCount = data.filter((v) => v.type == 2)[0].num
                this.spaceCount.auditCount = data.filter((v) => v.type == 3)[0].num
                this.spaceCount.dataCount = data.filter((v) => v.type == 4)[0].totalNum

                this.menustotal[0].num = data.filter((v) => v.type == 11)[0].totalNum
                this.menustotal[1].num = data.filter((v) => v.type == 12)[0].totalNum
                this.menustotal[2].num = data.filter((v) => v.type == 13)[0].totalNum
                this.menustotal[3].num = data.filter((v) => v.type == 14)[0].totalNum
                this.menustotal[4].num = data.filter((v) => v.type == 15)[0].totalNum
                this.menustotal[5].num = data.filter((v) => v.type == 16)[0].totalNum
                this.menustotal[6].num = data.filter((v) => v.type == 17)[0].totalNum
            })
        },
    },
}
</script>
<style scoped lang="scss">
.user-center {
    margin-bottom: 50px;
    h2 {
        color: #333;
        font-size: 20px;
        line-height: 18px;
        width: 1em;
        margin-bottom: 20px;
        padding-bottom: 10px;
        span {
            color: #1364c7;
            font-size: 18px;
            margin-right: 10px;
        }
    }
    .user-ornament {
        background-size: cover;
        background: #f3f0f0;
        border: 1px solid #d9d0d0;
        box-shadow: 0 2px 12px 0 #bfbbbb;
        .crumbs-wrap {
            margin-left: 0;
            padding-top: 30px;
            height: 100px;
            .el-row {
                width: 1400px;
                .el-col-4 {
                    width: 16%;
                    text-align: center;
                    margin-left: 35px;
                }
            }
            @media screen and (max-width: 1400px) {
                .el-row {
                    width: 1200px;

                    .el-col-4 {
                        margin-left: 0;
                    }
                }
            }
        }
        h2 {
            font-size: 16px;
            span {
                color: #1364c7;
            }
        }
        .crumbs.fl {
            margin-right: 30px;
        }
    }
}
.user-center-main {
    height: 120px;
    border-radius: 5px;
    background-color: #eef1f5;
    padding: 20px 80px;
}

.el-col.el-col-8 {
    border-right: 1px solid #b8d1ee;
}
.border-non.el-col.el-col-8 {
    border-right: none;
}
.user-info-box {
    cursor: pointer;
    margin-top: 10px;
}
.user-info-box,
.user-audit-box {
    .user-info-hed,
    .user-audit-hed {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
.user-info-hed {
    img {
        border-radius: 50%;
    }
}

.user-info-material {
    max-width: 165px;
    margin-left: 20px;
    margin-top: 0px;
    .user-info-name {
        font-size: 20px;
        font-weight: 900;
        color: #000;
        display: inline-block;
    }
    .user-info-role {
        background: #e4490c;
        padding: 1px 12px;
        border-radius: 50px;
        display: inline-block;
        line-height: 20px;
        font-size: 12px;
        vertical-align: 4px;
    }
    p {
        line-height: 22px;
        color: #000;
    }
    .topage {
        font-size: 12px;
        color: #000;
    }
}
.user-audit-box {
    .user-audit-hed {
        background: #0b52a4;
        text-align: center;
        img {
            width: 25px;
            height: 25px;
            margin-top: 17px;
        }
    }

    .user-audit-totl {
        color: #fff;
        margin-left: 20px;
        cursor: pointer;
        .user-audit-num {
            font-size: 32px;
            font-weight: 900;
        }
        .user-audit-title {
        }
    }
}
.user-info-menustotal {
    width: 1400px;
    margin: 0 auto;
    margin-top: 30px;
    padding-left: 110px;
    .menustotal-item {
        color: #fff;
        width: 12%;
        cursor: pointer;
        text-align: center;
        padding: 0 5px;
        .menustotal-item-total {
            text-align: center;
            font-size: 40px;
            font-weight: 900;
            line-height: 1px;
            margin-bottom: 15px;
        }
        .menustotal-item-name {
            padding: 4px 18px;
            border-radius: 50px;
            background: #d45151;
            display: inline-block;
        }
        .menustotal-item-line {
            text-align: center;
            height: 15px;
            margin-bottom: 10px;
            span {
                display: inline-block;
                width: 20px;
                height: 1px;
                background: #619ada;
            }
        }
    }
    @media screen and (max-width: 1350px) {
        .menustotal-item {
            width: 11%;
        }
    }
}

.user-info-iconWrap {
    padding-left: 6px;
    width: 1400px;
    margin: 0 auto;
    padding-top: 100px;
    min-height: 420px;
    .user-info-icon {
        margin-left: 30px;
        width: 1070px;
    }
    .icon-item {
        margin-right: 44px;
        text-align: center;
        padding-bottom: 15px;
        width: 170px;
        height: 125px;
        border-radius: 5px;
        cursor: pointer;
        color: #fff;
        font-weight: 900;
        margin-bottom: 40px;
        img {
            width: 45px;
            margin-top: 40px;
            min-height: 50px;
        }
    }
    p {
        padding-top: 5px;
    }
}
.user-info-learn.fl img {
    width: 300px;
    height: 320px;
    cursor: pointer;
}
.webheart.user-center {
    width: 100%;
}
@media screen and (max-width: 1350px) {
    .webheart.user-center {
        width: auto;
        overflow: hidden;
    }
}
.user-audit-box.clearfix.icon_top2 .user-audit-hed {
    background: #d45151;
}
.user-audit-box.clearfix.icon_top3 .user-audit-hed {
    background: #f09621;
}
.user-audit-box.clearfix.icon_top4 .user-audit-hed {
    background: #18bdc7;
}
.user-audit-box.clearfix.icon_top5 .user-audit-hed {
    background: #28d280;
}
.user-audit-box.clearfix.icon_top2 .user-audit-totl {
    color: #d45151;
}
.user-audit-box.clearfix.icon_top3 .user-audit-totl {
    color: #f09621;
}
.user-audit-box.clearfix.icon_top4 .user-audit-totl {
    color: #18bdc7;
}
.user-audit-box.clearfix.icon_top5 .user-audit-totl {
    color: #28d280;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.user-audit-box {
    margin-top: 10px;
}
@media screen and (max-width: 1350px) {
    .user-center-main {
        padding: 20px 10px;
    }
    .user-info-menustotal {
        padding-left: 0px;
    }
}
</style>
